<script setup>
import { ref } from "vue";
const dialogVisible = ref(false);
</script>

<template>
  <div class="main_box">
    <div class="header">
      <h1>公司详情</h1>
      <el-icon class="close" size="30" @click="$emit('close')"
        ><CircleClose
      /></el-icon>
    </div>
    <div class="body">
      <div class="company_info">
        <div class="company_info_top">
          <div class="company_name">
            中移建设有限公司
            <el-button
              link
              type="primary"
              size="small"
              style="margin-left: 15px"
              @click="dialogVisible = true"
            >
              简介
            </el-button>
          </div>
          <span class="total_score"
            >综合指数：<span class="score_num">90</span></span
          >
        </div>
        <div class="company_info_bottom">
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><Money /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>注册资金（万元）</h4>
              <div>11000</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><User /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>人员数量（人）</h4>
              <div>3596</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><GoldMedal /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>信用/税务评级</h4>
              <div>A</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><Star /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>公司资质（项）</h4>
              <div>79</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>人员资质（项）</h4>
              <div>1212</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><Star /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>知识产权（项）</h4>
              <div>87</div>
            </div>
          </div>
          <div class="info_tag">
            <div class="info_tag_left">
              <el-icon><Money /></el-icon>
            </div>
            <div class="info_tag_right">
              <h4>历史合同金额（万元）</h4>
              <div>74231</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_table_box">
        <div class="shengtai_box">
          <div class="second_title">生态分类</div>
          <table>
            <tr>
              <td>生态类型</td>
              <td>集成调测类伙伴</td>
              <td>能力标签</td>
              <td>集成,安装服务,运营运维</td>
            </tr>
            <tr>
              <td>专业标签</td>
              <td>云,网,运营运维</td>
              <td>行业标签</td>
              <td>全行业</td>
            </tr>
            <tr>
              <td>能力简介</td>
              <td colspan="3">
                中移建设有限公司隶属于中国移动集团，是中国移动旗下唯一的工程施工企业，具有通信工程施工总承包壹级、电子与智能化工程专业承包贰级等多种资质，可承揽项目：通信项目建设、网络机房建设、网络专线接入，网络综合布线，视频监控，楼宇弱电，小区智能化，软件开发，ICT项目，IT计算机系统服务等项目
              </td>
            </tr>
          </table>
        </div>
        <div class="score_table_box">
          <div class="tongyong_box">
            <div class="second_title">通用能力</div>
            <table class="table">
              <tr>
                <td colspan="6" class="type_title">公司规模指数：10</td>
              </tr>
              <tr>
                <td>注册资金（万元）</td>
                <td>11000</td>
                <td>人员数量（人）</td>
                <td>3596</td>
                <td>信用/税务评级</td>
                <td>A</td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">资质认证指数：10</td>
              </tr>
              <tr>
                <td>公司资质（项）</td>
                <td>79</td>
                <td>人员资质（项）</td>
                <td>1212</td>
                <td>知识产权（项）</td>
                <td>87</td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">合作案例指数：10</td>
              </tr>
              <tr>
                <td>行业荣誉</td>
                <td>/</td>
                <td>历史合同金额（万元）</td>
                <td>74231</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">风险评估指数：10</td>
              </tr>
              <tr>
                <td>司法案件</td>
                <td>127</td>
                <td>经营风险</td>
                <td>/</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">解决方案指数：/</td>
              </tr>
              <tr>
                <td>方案支撑能力</td>
                <td>/</td>
                <td>规划咨询能力</td>
                <td>/</td>
                <td>生态合作能力</td>
                <td>/</td>
              </tr>
            </table>
          </div>
          <div class="zhuanye_box">
            <div class="second_title">专业能力</div>
            <table class="table">
              <tr>
                <td colspan="6" class="type_title">集成能力指数：8</td>
              </tr>
              <tr>
                <td>垫资能力</td>
                <td>8</td>
                <td>属地支撑</td>
                <td>9</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">产品能力指数：/</td>
              </tr>
              <tr>
                <td>供货周期</td>
                <td>/</td>
                <td>价格水平</td>
                <td>/</td>
                <td>技术认证</td>
                <td>/</td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">运营运维能力指数：10</td>
              </tr>
              <tr>
                <td>运维模型/工具成熟度</td>
                <td>8</td>
                <td>属地支撑</td>
                <td>9</td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colspan="6" class="type_title">平台/定软开发能力指数：/</td>
              </tr>
              <tr>
                <td>软件著作权</td>
                <td>/</td>
                <td>CMMI（软件成熟度）评级</td>
                <td>/</td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="公司简介" width="500">
      <span
        >中移建设有限公司 (曾用名：铁通工程建设有限公司)
        ，成立于2003年，中国移动成员，位于北京市，是一家以从事土木工程建筑业为主的企业。企业注册资本11000万人民币，超过了97%的北京市同行，实缴资本11000万人民币。
      </span>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 4px;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb {
  background-color: #cecece;
  border: 1px solid #ababab;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 20px;
}
.main_box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1300px;
  height: 650px;
  background: rgb(218, 248, 255);
  border-radius: 16px;
  z-index: 10;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    background: white;
    border-radius: 16px 16px 0 0;
    h1 {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .body {
    height: 590px;
    margin-top: 10px;
    overflow: auto;
    border-radius: 0 0 16px 16px;
    .company_info {
      margin: 0 10px 10px 10px;
      padding: 10px;
      background: white;
      .company_info_top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(218, 218, 218);
        .company_name {
          padding-bottom: 5px;
          font-size: 15px;
          font-weight: bold;
        }
        .total_score {
          margin-right: 30px;
          font-size: 14px;
          font-weight: bold;
          .score_num {
            font-size: 20px;
            color: #2d61eb;
          }
        }
      }
      .company_info_bottom {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        height: 40px;
        .info_tag {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 150px;
          height: 40px;
          padding: 5px;
          border-radius: 10px;
          background: linear-gradient(to right, #dae6ff, #e6f9ff);
          .info_tag_left {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(to right, #bcd1ff, #d6f5ff);
            color: #2d61eb;
          }
          .info_tag_right {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 11px;
            flex: 1;
            div {
              color: #2d61eb;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }
    .main_table_box {
      padding: 10px 10px 20px 10px;
      margin: 10px 10px 0 10px;
      background: white;
      overflow: auto;
      .second_title {
        height: 23px;
        width: 70px;
        line-height: 23px;
        text-align: center;
        margin: 10px 0 0 10px;
        padding: 3px;
        font-size: 14px;
        font-weight: bolder;
        color: #2d61eb;
        background: linear-gradient(to right, #dae6ff, #e6f9ff);
        border-radius: 5px;
      }
      .shengtai_box {
        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 5px;
          td {
            padding: 7px;
            text-align: left;
            border: 1px solid #ddd;
            background-color: #ffffff;
          }
          td {
            &:nth-child(2n-1) {
              width: 130px;
              background-color: #f9f9f9;
            }
          }
        }
      }
      .score_table_box {
        display: flex;
        justify-content: space-between;
        .tongyong_box {
          width: 50%;
          .table {
            width: 98%;
            border-collapse: collapse;
            margin-top: 5px;
            .type_title {
              height: 20px;
              background: linear-gradient(#e5f5ff, #f4fcff) !important;
            }
            td {
              height: 35px;
              padding: 7px;
              text-align: left;
              border: 1px solid #ddd;
              background-color: #ffffff;
            }
            td {
              &:nth-child(2n-1) {
                width: 120px;
                background-color: #f9f9f9;
              }
            }
          }
          .table2 {
            width: 49%;
          }
        }
        .zhuanye_box {
          width: 50%;
          .table {
            width: 98%;
            border-collapse: collapse;
            margin-top: 5px;
            .type_title {
              height: 20px;
              background: linear-gradient(#e5f5ff, #f4fcff) !important;
            }
            td {
              height: 57px;
              padding: 7px;
              text-align: left;
              border: 1px solid #ddd;
              background-color: #ffffff;
            }
            td {
              &:nth-child(2n-1) {
                width: 120px;
                background-color: #f9f9f9;
              }
            }
          }
          .table2 {
            width: 49%;
          }
        }
      }
    }
  }
}
</style>
